<!-- 登陆页面 -->
<template>
  <div class="login-wrapper">
    <div class="login-contaier">
      <div class="title">
        登录
      </div>
      <el-form :label-position="labelPosition"
        :model="formData"
        :rules="formDataRules"
        ref="formDataRef"
        label-width="100px"
        class="demo-ruleForm">
        <el-form-item prop="user">
          <el-input placeholder="请输入用户名"
            v-model="formData.user">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password"
            placeholder="请输入密码"
            v-model="formData.password">
          </el-input>
        </el-form-item>
      </el-form>
      <el-button @click="loginBtn"
        class="login-btn"
        type="primary">登陆</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      formData: {
        user: '',
        password: ''
      },
      formDataRules: {
        user: [
          { required: true, message: '请输入用户名' }
        ],
        password: [
          { required: true, message: '请输入密码' }
        ]
      },
      labelPosition: 'top'
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  methods: {
    loginBtn () {
      this.$refs.formDataRef.validate(async (valid) => {
        if (valid) {
          const res = await this.$http.post(`http://127.0.0.1:8080/userprofile-platform/api/user/login?user=${this.formData.user}&password=${this.formData.password}`)
          const { id, token, name } = res.data.data
          let params = JSON.parse(JSON.stringify(res.data.data))
          params.name = encodeURIComponent(params.name)
          delete params.token
          const cookie = token + ' ' + 'user=' + JSON.stringify(params)
          if (res.data.msg === '登录成功') {
            window.sessionStorage.setItem('name', name)
            window.sessionStorage.setItem('cookie', cookie)
            const roleData = await this.$http.get('http://127.0.0.1:8080/userprofile-platform/api/user/role/list', {
              params: {
                pageNum: 1,
                pageSize: 10,
                userId: id
              }
            })
            console.log(roleData.data.data.list[0].roleId);
            window.sessionStorage.setItem('roleId', roleData.data.data.list[0].roleId)
            this.$router.push({ name: 'Analyse', params: { name: name } })
          }
        }
      })
    }
  }
}
</script>

<style>
@import url("./index.css");
</style>